import React from 'react';
import { inject, observer} from 'mobx-react';
import {routerShape} from 'react-router';
import MonitorCondition from './Condition';
import {WeaErrorPage,WeaTools,WeaTop,WeaSearchGroup,WeaRightMenu,WeaPopoverHrm,WeaSelect,WeaLocaleProvider} from 'ecCom';
import {Button} from 'antd';
import * as Util from '../../util/listUtil';

const getLabel = WeaLocaleProvider.getLabel;

@inject("wfMonitorIndexStore")

@observer
class WorkflowMonitor extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        this.doInit(this.props);
    }

    doInit(props){
        const { wfMonitorIndexStore,location } = props;
        wfMonitorIndexStore.setUrlParams(location.query);
        wfMonitorIndexStore.loadCondition();
    }
    componentDidMount() {
        // this.doInit(this.props);
    }
    resetHeight = (height) => {
        jQuery(".wf-query-condition").height(height - 60);
    }
    componentWillReceiveProps(nextProps) {
    	if(window.location.pathname.indexOf('/spa/workflow/index') >= 0 && nextProps.title && document.title !== nextProps.title)
    		document.title = nextProps.title;
        if(this.props.location.key !== nextProps.location.key) {
        	this.doInit(nextProps);
        }
    }
    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }
    varTemp = {
      rightBtns: [],
      collectParams: {favname: '', favouritetype:2}
    }
    render() {
        const isSingle = window.location.pathname.indexOf('/spa/workflow/index') >= 0;
        const { wfMonitorIndexStore } = this.props;
        const { title , loading , urlParams, form ,forceRender} = wfMonitorIndexStore;
        const formParams = form.getFormParams();    //Mobx-form的Bug，form传给子组件时需外层调用下取值，否则查询条件变了组件不会render
        this.varTemp.rightBtns = [];
        this.varTemp.rightBtns = this.getRightMenu();
        this.varTemp.collectParams.favname = title;
        return (
            <div className='wf-query-index'>
            	{isSingle && <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@tx255n`} />}
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@acl7fz`} 
                    collectParams={this.varTemp.collectParams}
                    datas={this.varTemp.rightBtns} forceRender={forceRender}>
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@99jjuz`}
                	title={title}
                	loading={loading}
                	icon={Util.getTopIcon(urlParams)}
                    iconBgcolor={Util.getTopIconBgColor(urlParams)}
                    getHeight={this.resetHeight}
                	// buttons={[]}
                	buttonSpace={10}
                	showDropIcon={true}
                	dropMenuDatas={this.varTemp.rightBtns} >
                        <div className='wf-query-condition'>
                            <MonitorCondition ecId={`${this && this.props && this.props.ecId || ''}_MonitorCondition@yv96ua`} queryStore={wfMonitorIndexStore} onEnterSearch={this.forwardQueryResult} />
                        </div>
                        <div className='wf-query-btns'>
                            {this.getButtons()}
                        </div>
                </WeaTop>
                </WeaRightMenu>
            </div>
        )
    }
    getButtons() {
        const { wfMonitorIndexStore } = this.props;
        const btnStyle = {borderRadius: 3, height: 28, width: 80}
        return[
                (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r11zyf@search`} type="primary" style={btnStyle} onClick= {this.forwardQueryResult.bind(this)}>{getLabel(197,'搜索')}</Button>),
                (<span style={{width:'15px', display:'inline-block'}}></span>),
                (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hyvs4f@reset`} type="ghost"  style={btnStyle} onClick={()=>{ wfMonitorIndexStore.resetCondition(); wfMonitorIndexStore.setConditionByTree(); }}> {getLabel(2022,'重置')} </Button>)
            ];
       
    }
    getRightMenu(){
        const { wfMonitorIndexStore } = this.props;
        let btns = [];
    	btns.push({
            key: "search",
    		icon: <i className='icon-workflow-Right-menu--search'/>,
            content:getLabel(197,'搜索'),
            onClick: key =>{
                this.forwardQueryResult()
            }
        });
        btns.push({
            key: "batchDelete",
    		icon: <i className='icon-coms-Batch-delete'/>,
            content:getLabel(2022,'重置'),
            onClick: key =>{
              wfMonitorIndexStore.resetCondition();
              wfMonitorIndexStore.setConditionByTree();
            }
        });
    	
    	return btns;
    }
    
    forwardQueryResult = () => {
        const { wfMonitorIndexStore } = this.props;
        const {title,condition,form,urlParams} = wfMonitorIndexStore;
        // WeaTools.ls.set("listMonitorCondition", JSON.stringify(form.getFormData())); //无法走缓存，对于表单中人力字段在组织结构中选人，JSON.stringify转换会报错。
        this.context.router.push({
            pathname: "/main/workflow/monitorResult",
            query: {...{fromwhere:"monitor"},...urlParams},
        });
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@fmrbns`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(WorkflowMonitor);